// 实现这个项目的构建任务
// .gitignore 这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中

const { src, dest, parallel, series, addListener, watch } = require('gulp')
// src 读取流  dest 写入流 parallel 并行 series 串行, watch监听

// 清空目录
const del = require('del')
// 自动执行插件 gulp-sass => plugins.sass 
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins()
// 创建服务器 browser-sync
const browserSync = require('browser-sync')
const bs = browserSync.create()


// process.cwd() 拿到当前工作目录

// 判断文件类型
// gulp-if
// 压缩html js css
// gulp-htmlmin gulp-uglify gulp-clean-css 
// 引用依赖的处理
// const useref = require('gulp-useref')
// 忽略下滑线_开头的sass
// const sass = require('gulp-sass')
// // 需要安装 @babel/core 和 @babel/preset-env
// const babel = require('gulp-babel')
// // 模板文件
// const swig = require('gulp-swig')
// // 压缩图片
// const imagemin = require('gulp-imagemin')

const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Features',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}

const style = () => {
  // base 保留目录结构
  return src('src/assets/styles/*.scss', { base: 'src' })
    // 完全展开的样式 expanded
    .pipe(plugins.sass())
    .pipe(dest('.temp'))
    .pipe(bs.reload({ stream: true })) // 已流的方式，提交浏览器
}

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    // 完全展开的样式 expanded
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('.temp'))
    .pipe(bs.reload({ stream: true })) // 已流的方式，提交浏览器
}

const page = () => {
  // ** 表示任意目录下的html
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data: data }))
    .pipe(dest('.temp'))
    .pipe(bs.reload({ stream: true })) // 已流的方式，提交浏览器
}

const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'))
}

const clean = () => {
  return del(['.temp', 'dist'])
}

const useref = () => {
  return src('.temp/*.html', { base: '.temp' })
  .pipe(plugins.useref({ searchPath: ['.temp', '.'] }))
  .pipe(plugins.if(/\.js$/, plugins.uglify()))
  .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
  .pipe(plugins.if(/\.html$/, plugins.htmlmin({
    collapseWhitespace: true,
    minifyCSS: true,
    minifyJS: true
  })))
  .pipe(dest('dist'))
}

const serve = () => {
  // browserSync的使用
  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload)
  // 基础使用
  // watch('src/assets/styles/*.scss', style)
  bs.init({
    notify: false,
    port: '3002',
    // files: 'dist/**', //监听diss文件  和.pipe(bs.reload({ stream: true }))效果一样
    server: {
      baseDir: ['.temp','src','public'], // 可以为数组或sting 数组顺序从前到后
      routes: {
        '/node_modules': 'node_modules' // 路由的映射
      }
    }
  })
}

// 开发阶段
const compile = parallel(style, script, page)
// 上线的任务
const build = series(clean, parallel(series(compile, useref),image, font, extra))

const start = series(compile, serve)

module.exports = {
  start,
  build, 
  compile,
  clean,
  serve
}

// "clean": "gulp clean",
// "lint": "gulp lint",
// "serve": "gulp serve",
// "build": "gulp build",
// "start": "gulp start",